<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏示例</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <style>
        /* 设置整体的样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            margin: 0; /* 去除默认的外边距 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直方向布局 */
            height: 100vh; /* 高度占满整个视口 */
        }

        /* 顶部导航栏样式 */
        .top-nav {
            width: 100%; /* 宽度100% */
            height: 50px; /* 高度50px */
            background-color: black; /* 背景颜色黑色 */
            color: white; /* 文字颜色白色 */
            text-align: left; /* 文字左对齐 */
            padding: 0; /* 内边距为0 */
        }

        /* 顶部导航栏标题样式 */
        .top-nav h1 {
            margin: 8px; /* 外边距8px */
            font-size: 24px; /* 字体大小24px */
        }

        /* 主内容区样式 */
        .main-content {
            display: flex; /* 使用flex布局 */
            flex-grow: 1; /* 占据剩余空间 */
            flex-direction: column; /* 垂直方向布局 */
        }

        /* 筛选栏样式 */
        .filter-bar {
            padding: 10px; /* 内边距10px */
            background-color: #f5f5f5; /* 背景颜色浅灰色 */
            border-bottom: 1px solid #ddd; /* 底部边框 */
        }

        /* 筛选栏中的下拉菜单样式 */
        .filter-bar select {
            padding: 5px; /* 内边距5px */
            font-size: 16px; /* 字体大小16px */
        }

        /* 内容区样式 */
        .content {
            flex-grow: 1; /* 占据剩余空间 */
            padding: 20px; /* 内边距20px */
            overflow-y: auto; /* 垂直方向滚动 */
        }

        /* 单个职位框样式 */
        .job-box {
            border: 1px solid #ccc; /* 边框颜色浅灰色 */
            padding: 20px; /* 内边距20px */
            margin: 20px 0; /* 上下外边距20px */
            position: relative; /* 相对定位 */
            cursor: pointer; /* 鼠标指针 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直方向布局 */
        }

        /* 悬停时改变背景颜色 */
        .job-box:hover {
            background-color: #f9f9f9; /* 背景颜色浅灰色 */
        }

        /* 职位详情样式 */
        .job-details {
            display: flex; /* 使用flex布局 */
            gap: 20px; /* 子元素间距20px */
            margin-bottom: 10px; /* 下边距10px */
        }

        /* 职位详情中的段落样式 */
        .job-details p {
            margin: 0; /* 去除默认外边距 */
        }

        /* 按钮区样式 */
        .job-buttons {
            position: absolute; /* 绝对定位 */
            bottom: 10px; /* 距底部10px */
            right: 10px; /* 距右边10px */
        }

        /* 按钮样式 */
        .job-buttons button {
            margin-left: 10px; /* 左边距10px */
            padding: 5px 10px; /* 内边距 */
            border: none; /* 无边框 */
            cursor: pointer; /* 鼠标指针 */
        }

        /* 编辑按钮样式 */
        .job-buttons .edit-btn {
            background-color: #4CAF50; /* 背景颜色绿色 */
            color: white; /* 文字颜色白色 */
        }

        /* 详情按钮样式 */
        .job-buttons .details-btn {
            background-color: #3498db; /* 背景颜色蓝色 */
            color: white; /* 文字颜色白色 */
        }

        /* 模态框样式 */
        .modal {
            position: fixed; /* 固定定位 */
            top: 0; /* 距顶部0 */
            left: 0; /* 距左边0 */
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
            display: flex; /* 使用flex布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        /* 模态框内容样式 */
        .modal-content {
            width: 800px;
            height: 600px;
            background-color: white; /* 背景颜色白色 */
            padding: 20px; /* 内边距20px */
            border-radius: 8px; /* 圆角边框 */
            
          
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 阴影效果 */
        }

        /* 关闭按钮样式 */
        .close-btn {
            float: right;
            background-color: #ff5c5c; /* 背景颜色红色 */
            color: white; /* 文字颜色白色 */
            border: none; /* 无边框 */
            padding: 10px 20px; /* 内边距 */
            border-radius: 5px; /* 圆角边框 */
            cursor: pointer; /* 鼠标指针 */
            position: relative;
            bottom: 5px;
        }

        /* 关闭按钮悬停样式 */
        .close-btn:hover {
            background-color: #ff1c1c; /* 背景颜色更深的红色 */
        }
        .text{
        width: 100%;
        height: 200px; /* 或其他所需高度 */
        resize: both; /* 允许用户调整大小 */
        }
        #text1{
            font-size: 19px;
        }


    </style>
</head>

<body>

<!-- 顶部导航栏 -->
<div class="top-nav">
    <h1>聘途</h1> <!-- 标题 -->
</div>
<div class="main-content" id="app">
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <label for="education-filter">最低学历要求:</label> <!-- 筛选标签 -->
        <select id="education-filter" v-model="selectedEducation" @change="filterPeoples">
            <option value="">全部</option> <!-- 全部选项 -->
            <option value="初中及以下">初中及以下</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
        </select>
    </div>

    <!-- 内容区 -->
    <div class="content">
        <!-- 单个职位框 -->
        <div class="job-box" v-for="people in filteredPeoples" :key="people.sid">
            <h2>{{ people.sname }}</h2> <!-- 名字 -->
            <div class="job-details">
                <p>学历: {{ people.sedu }}</p> <!-- 学历 -->
                <p>性别: {{ people.sgender }}</p> <!-- 性别 -->
                <p>电话: {{ people.sphone }}</p> <!-- 电话 -->
            </div>
            <div class="job-buttons">
                <button class="details-btn" @click="showDetails(people)">查看简历</button> <!-- 查看简历按钮 -->
                <button v-show="!people.flag" id="button1" class="edit-btn" @click="hirePeople(people.sid,people.flag)" style="background-color: #4CAF50;">录用</button> 
                <button v-show="people.flag" id="button2" class="edit-btn"  @click="hirePeople(people.sid,people.flag)" style="background-color: red;">取消录用</button> 
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal" v-if="showModal">
        <div  class="modal-content">
            <h2>{{ selectedPeople.sname }}的简历
                <button class="close-btn" @click="showModal = false">关闭</button></h2> <!-- 简历标题 -->
            <pre id="text1" class="text" v-text="fileContent"> </pre>
            <!-- <textarea class="text" v-model="fileContent"></textarea> -->
             <!-- 关闭按钮 -->
        </div>
        
    </div>
</div>

<!-- 引入Vue.js库 -->
<!--<script src="vue.min.js"></script>-->
<!--<script src="vue-router.min.js"></script>-->
<!--&lt;!&ndash; 引入Axios库 &ndash;&gt;-->
<!--<script src="axios.min.js"></script>-->

<!-- 引入 Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入 Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var CompanyInfo = JSON.parse(sessionStorage.getItem('userData'));
    var Position = JSON.parse(sessionStorage.getItem('PositionData'));
    // 创建Vue实例
    new Vue({
        el: '#app', // 挂载点
        data: {
            peoples: [], // 存储所有人的数据
            selectedEducation: '', // 存储筛选条件
            filteredPeoples: [], // 存储筛选后的人数据
            showModal: false, // 控制模态框显示与否
            selectedPeople: {} ,// 存储当前选中的人信息
            sid:0,
            pid:0,
            fileContent:'',
            flag:false
        },
        created() {
            this.fetchPeoples(); // 实例创建时获取人员数据
        },
        methods: {
            // 获取人员数据
            fetchPeoples() {
                this.pid=Position.pid;
                let data4 = new FormData();
                data4.append("pid",this.pid);
                axios.post('http://localhost:8080/hqdx/recruit/showRecruitSeeker',data4) 
                    .then(response => {
                        this.peoples = response.data.data.items; // 将响应数据赋值给peoples
                        // console.log(response.data.data.items);
                        // console.log(123)
                        for(let i=0;i<this.peoples.length;i++){
                            if(this.peoples[i].sedu == 1){
                                this.peoples[i].sedu = "初中及以下";
                            }else if(this.peoples[i].sedu == 2){
                                this.peoples[i].sedu = "高中"
                            }else if(this.peoples[i].sedu == 3){
                                this.peoples[i].sedu = "大专"
                            }else if(this.peoples[i].sedu == 4){
                                this.peoples[i].sedu = "本科"
                            }else if(this.peoples[i].sedu == 5){
                                this.peoples[i].sedu = "硕士"
                            }else if(this.peoples[i].sedu == 6){
                                this.peoples[i].sedu = "博士"
                            }
                        }
                        this.filteredPeoples = this.peoples; // 初始化filteredPeoples
                    })
                    .catch(error => {
                        console.error("There was an error fetching the people!", error); // 错误处理
                    });
            },
            // 录用人员
            hirePeople(sid,flag) {
                this.flag=flag;
                let data1 = new FormData();
                this.pid=Position.pid;
                this.sid=sid;
                data1.append("sid",this.sid);
                data1.append("pid",this.pid);
                data1.append('flag',this.flag);
                // console.log(this.flag);
                axios.post('http://localhost:8080/hqdx/recruit/QueryRecruit', data1) // 发起POST请求录用人员
                    .then(response => {
                        if(response.data.message === '录用失败，已达录用人数上限'){
                            alert(response.data.message);
                        }
                        else{
                            this.fetchPeoples();
                        }
                        // 实例创建时获取人员数据
                        // 提交成功后跳转回导航栏页面
                    })
                    .catch(error => {
                        console.log(response.data)
                        alert('录用失败'); // 错误提示
                        this.fetchPeoples(); // 实例创建时获取人员数据
                    });
            },
            // 筛选人员
            filterPeoples() {
                let data4 = new FormData();
                this.pid=Position.pid;
                data4.append("pid",this.pid);
                data4.append("sedu",this.selectedEducation);
                axios.post('http://localhost:8080/hqdx/recruit/SelectByEdu', data4) // 发起POST请求筛选人员
                    .then(response => {
                        this.filteredPeoples = response.data.data.items; // 更新筛选后的数据
                        for(let i=0;i<this.peoples.length;i++){
                            if(this.filteredPeoples[i].sedu == 1){
                                this.filteredPeoples[i].sedu = "初中及以下";
                            }else if(this.filteredPeoples[i].sedu == 2){
                                this.filteredPeoples[i].sedu = "高中"
                            }else if(this.filteredPeoples[i].sedu == 3){
                                this.filteredPeoples[i].sedu = "大专"
                            }else if(this.filteredPeoples[i].sedu == 4){
                                this.filteredPeoples[i].sedu = "本科"
                            }else if(this.filteredPeoples[i].sedu == 5){
                                this.filteredPeoples[i].sedu = "硕士"
                            }else if(this.filteredPeoples[i].sedu == 6){
                                this.filteredPeoples[i].sedu = "博士"
                            }
                        }
                    })
                    .catch(error => {
                        console.error("There was an error filtering the people!", error); // 错误处理
                    });
            },
            


            // 显示简历详情
            showDetails(people) {
                this.fetchFileContent(people);
                this.selectedPeople = people; // 设置当前选中人员信息
                this.showModal = true; // 显示模态框
            },
            fetchFileContent(people) {
                    // 使用 Axios 从后端获取文件内容
                    let data = new FormData();
                    //改动2
                    data.append("sinfo", people.sinfo);
                    //改动3
                    axios.post("http://localhost:8080/hqdx/seeker/showSeekerCv",data)
                        .then(response => {
                            this.fileContent = response.data.data.items; // 更新Vue实例的数据
                        })
                        .catch(error => {
                            console.error('Error fetching file content:', error);
                        });
            }
        }
    });
</script>
</body>
</html>
